import React, { createContext, useContext } from 'react';

// Context实例
const ThemeContext = createContext();

// root 组件
export const Root = () => {
  return (
    <div>
      {/* 夸组件传值：'pink' */}
      <ThemeContext.Provider value={'pink'}>
        <App />
      </ThemeContext.Provider>
    </div>
  );
};

const App = () => {
  // 使用 hooks 新-API 获取夸组件传的值：'pink'
  const value2 = useContext(ThemeContext);

  return (
    <div>
      <h1>App</h1>
      {/* hooks 新-API */}
      <div>新 hook api 获取跨组件传的值：{value2}</div>
      <hr />
      {/* class 旧-API */}
      <ThemeContext.Consumer>
        {(value) => '旧 class api：获取跨组件传的值' + value}
      </ThemeContext.Consumer>
    </div>
  );
};
